<template>
  <div id="play_bar" class="slide_tool_bar">
    <!-- 转到封面 -->
    <div class="tool_bar_item" v-if="isPlay">
      <div class="bar_item" @click="isShowCover=!isShowCover">
        <img class="bar_item_img" :title="isShowCover?'取消封面':'显示封面'"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/cover_icon.png">
        <span class="bar_item_text">{{isShowCover?'取消封面':'显示封面'}}</span>
      </div>
    </div>
    <span class="bar_group_separator" v-if="isPlay"></span>
    <!-- 上一步 -->
    <div class="tool_bar_item">
      <div class="bar_item" @click="previousAnimation">
        <img class="bar_item_img" title="上一步"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/previous_icon.png">
        <span class="bar_item_text">上一步</span>
      </div>
    </div>
    <!-- 下一步 -->
    <div class="tool_bar_item">
      <div class="bar_item" @click="nextAnimation">
        <img class="bar_item_img" title="下一步" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/next_icon.png">
        <span class="bar_item_text">下一步</span>
      </div>
    </div>
    <span class="bar_group_separator" v-if="isPlay"></span>
    <!-- 指针 -->
    <div class="tool_bar_item" v-if="isPlay && !isShowCover">
      <div class="bar_item" @click="clearEditorMask()">
        <img class="bar_item_img" title="指针" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/pointer.png">
        <span class="bar_item_text">指针</span>
      </div>
    </div>
    <!-- 画笔 -->
    <div class="tool_bar_item" v-if="isPlay && !isShowCover">
      <div class="bar_item" @click="setDrawState('FreeLine')">
        <img class="bar_item_img" title="画笔" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/brush_icon.png">
        <span class="bar_item_text">{{isDraw && drawMode=='FreeLine'?'取消画笔':'画笔'}}</span>
      </div>
    </div>
    <!-- 直线 -->
    <div class="tool_bar_item" v-if="isPlay && (!isShowCover && !temporaryFile.files.length)">
      <div class="bar_item" @click="setDrawState('StraightLine')">
        <img class="bar_item_img" title="直线" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/line.png">
        <span class="bar_item_text">{{isDraw && drawMode=='StraightLine'?'取消直线':'直线'}}</span>
      </div>
    </div>
    <!-- 矩形 -->
    <div class="tool_bar_item" v-if="isPlay && (!isShowCover && !temporaryFile.files.length)">
      <div class="bar_item" @click="setDrawState('Rectangle')">
        <img class="bar_item_img" title="矩形" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/rectangle.png">
        <span class="bar_item_text">{{isDraw && drawMode=='StraightLine'?'取消矩形':'矩形'}}</span>
      </div>
    </div>
    <!--&lt;!&ndash; 椭圆 &ndash;&gt;-->
    <!--<div class="tool_bar_item" v-if="isPlay && !isShowCover">-->
    <!--<div class="bar_item" @click="setDrawState('Ellipse')">-->
    <!--<img class="bar_item_img" title="椭圆" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/brush_icon.png">-->
    <!--<span class="bar_item_text">{{isDraw && drawMode=='StraightLine'?"取消直线":"直线"}}</span>-->
    <!--</div>-->
    <!--</div>-->
    <!-- 清除标注 -->
    <div class="tool_bar_item" v-if="isPlay && !isShowCover">
      <div class="bar_item" @click="clearTrajectory">
        <img class="bar_item_img" title="清除标注"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/clear_icon.png">
        <span class="bar_item_text">清除标注</span>
      </div>
    </div>
    <!-- 画笔 -->
    <div class="tool_bar_item" v-if="isPlay && !isShowCover">
      <div class="bar_item" @click="isZoom=!isZoom">
        <img class="bar_item_img" title="放大" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/zoon_icon.png">
        <span class="bar_item_text">放大</span>
      </div>
    </div>

    <span class="bar_group_separator" v-if="isPlay && !isShowCover"></span>
    <!-- 关闭投影文件 -->
    <div class="tool_bar_item" v-if="isPlay && temporaryFile.files.length && !isShowCover">
      <div class="bar_item" @click="setTemporaryFile(null)">
        <img class="bar_item_img" title="关闭投影文件"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/close_icon.png">
        <span class="bar_item_text">关闭投影文件</span>
      </div>
    </div>


    <!-- 自动播放 -->
    <div class="tool_bar_item" v-if="isPlay">
      <div v-show="!autoPlay" class="bar_item" @click="setAutoPlay('play')">
        <img class="bar_item_img" title="自动播放"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/auto_play_icon.png">
        <span class="bar_item_text">自动播放</span>
      </div>
      <div v-show="autoPlay=='play'" class="bar_item" @click="setAutoPlay('pause')">
        <img class="bar_item_img" title="暂停播放"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/pause_play_icon.png">
        <span class="bar_item_text">暂停播放</span>
      </div>
      <div v-show="autoPlay=='pause'" class="bar_item" @click="setAutoPlay('play')">
        <img class="bar_item_img" title="继续播放"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/continue_play_icon.png">
        <span class="bar_item_text">继续播放</span>
      </div>
    </div>


    <!-- 预览 -->
    <div class="tool_bar_item" v-if="isPreview">
      <div class="bar_item" @click="isPreview=false">
        <img class="bar_item_img" title="结束预览"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/play_pause_icon.png">
        <span class="bar_item_text">结束预览</span>
      </div>
    </div>
    <!-- 放映 -->
    <div class="tool_bar_item" v-if="isPlay">
      <div class="bar_item" @click="isPlay=false">
        <img class="bar_item_img" title="结束放映"
             src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/play_pause_icon.png">
        <span class="bar_item_text">结束放映</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import action from '../../common/typeActions'

  export default {
    name: 'SlidePlayToolBar',
    computed: {
      ...mapState({
        slideEditor: state => state.slideEditor,
        autoPlay: state => state.slideEditor.autoPlay,
        preview: state => state.slideEditor.preview,
        temporaryFile: state => state.slideEditor.temporaryFile,
        maskCanvas: state => state.slideEditor.maskCanvas,
        zoomImage: state => state.slideEditor.zoomImage
      }),
      // 设置播放状态
      isPlay: {
        get () {
          return this.slideEditor.isPlay
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetPlayState, value)
        }
      },
      // 设置播放状态
      isPreview: {
        get () {
          return this.slideEditor.preview
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetPreviewState, value)
        }
      },
      cursorState: {
        get () {
          return this.slideEditor.cursorState
        },
        set (value) {
          if (value) {
            this.isZoom = false
          }
          this.$store.dispatch(action.SLIDEEDITOR.SetCursorState, value)
        }
      },
      isDraw: {
        get () {
          return this.temporaryFile.files.length ||
          this.temporaryFile.texts.length
            ? this.temporaryFile.isDraw
            : this.maskCanvas.isDraw
        }
        // ,
        // set(value) {
        //   this.$store.dispatch(
        //     this.temporaryFile.files.length || this.temporaryFile.texts.length
        //       ? action.SLIDEEDITOR.SetTemporaryBrushState
        //       : action.SLIDEEDITOR.SetEditorBrushState,
        //     value
        //   );
        // }
      },
      drawMode: {
        get () {
          return this.temporaryFile.files.length ||
          this.temporaryFile.texts.length
            ? this.temporaryFile.drawMode
            : this.maskCanvas.drawMode
        }
        // ,
        // set(value) {
        //   this.$store.dispatch(
        //     this.temporaryFile.files.length || this.temporaryFile.texts.length
        //       ? action.SLIDEEDITOR.SetTemporaryBrushState
        //       : action.SLIDEEDITOR.SetEditorBrushState,
        //     value
        //   );
        // }
      },
      isZoom: {
        get () {
          return this.zoomImage.isZoom
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetEditorZoomAttr, {
            attrName: 'isZoom',
            attrValue: value
          })
        }
      },
      isShowCover: {
        get () {
          return this.slideEditor.isShowCover
        },
        set (value) {
          this.$store.dispatch(action.SLIDEEDITOR.SetCoverShowState, value)
        }
      }
    },
    methods: {
      ...mapActions({
        setAutoPlay: action.SLIDEEDITOR.SetAutoPlay,
        previousAnimation: action.SLIDEEDITOR.PreviousAnimation,
        nextAnimation: action.SLIDEEDITOR.NextAnimation,
        setTemporaryFile: action.SLIDEEDITOR.SetTemporaryFile,
        setMaskTrajectory: action.SLIDEEDITOR.SetMaskTrajectory,
        setTemporaryTrajectory: action.SLIDEEDITOR.SetTemporaryTrajectory,
        clearEditorMask: action.SLIDEEDITOR.ClearEditorMask
      }),
      setDrawState: function (drawMode) {
        let obj = {isDraw: !this.isDraw, drawMode: drawMode}
        if (this.isDraw && this.drawMode === drawMode) {
          obj = {isDraw: false, drawMode: drawMode}
        } else if (this.isDraw && this.drawMode !== drawMode) obj = {isDraw: true, drawMode: drawMode}
        this.$store.dispatch(
          this.temporaryFile.files.length || this.temporaryFile.texts.length
            ? action.SLIDEEDITOR.SetTemporaryBrushState
            : action.SLIDEEDITOR.SetEditorBrushState,
          obj
        )
      },
      clearTrajectory: function () {
        if (this.temporaryFile.files.length || this.temporaryFile.texts.length) {
          if (!this.temporaryFile.trajectorys.length) return
          let trajectorys = JSON.parse(
            JSON.stringify(this.temporaryFile.trajectorys)
          )
          trajectorys.splice(trajectorys.length - 1, 1)
          this.setTemporaryTrajectory(trajectorys)
        } else {
          if (!this.maskCanvas.trajectorys.length) return
          let trajectorys = JSON.parse(
            JSON.stringify(this.maskCanvas.trajectorys)
          )
          trajectorys.splice(trajectorys.length - 1, 1)
          this.setMaskTrajectory(trajectorys)
        }
      }
    }
  }
</script>
<style>
  #play_bar.slide_tool_bar {
    width: 100%;
  }

  #play_bar .tool_bar_item {
    width: 30px;
    height: 30px;
    position: relative;
    color: #bee2fa;
    display: inline-block;
  }

  #play_bar .tool_bar_item:hover {
    background: #c7d3e4;
    color: white;
  }

  #play_bar .bar_item {
    height: 100%;
    width: 100%;
  }

  #play_bar .bar_item_img {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 7px;
  }

  #play_bar .bar_item_text {
    line-height: 40px;
  }

  /*#play_bar .bar_item_content {*/
  /*position: absolute;*/
  /*width: 160px;*/
  /*height: 40px;*/
  /*background: #1e7dbc;*/
  /*top: 0;*/
  /*right: 160px;*/
  /*}*/

  /*#play_bar .bar_item_content select {*/
  /*outline: none;*/
  /*border: 1px solid #298dd3;*/
  /*border-radius: 3px;*/
  /*background: #1773af;*/
  /*width: calc(100% - 20px);*/
  /*height: 30px;*/
  /*float: left;*/
  /*margin: 5px 10px;*/
  /*color: white;*/
  /*}*/

  .bar_group_separator {
    display: inline-block;
    background-color: #c0c0c0;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 5px 2px 0;
    height: 18px;
    width: 1px;
    box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5);
  }
</style>
